<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select v-model="ser.product_id" filterable @change="product_id_change" placeholder="请选择产品"
                style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-select filterable v-model="ser.model_number_id" placeholder="请选择型号" style="width: 100%">
            <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button @click="model_number_click" style="margin-left: 15px; background: #1890ff; color: aliceblue">
            搜索</el-button>
          <el-button @click="add_model_number" style="background: #1890ff; color: aliceblue">新增型号</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column label="产品名称">
        <template slot-scope="scope">
          <span style="display: block">{{
            scope.row.product[0].product_name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
          <span style="display: block">{{ scope.row.model_number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img :src="uploadImgUrl + scope.row.file.file_url" @click="push_img(scope.row)" style="
              cursor: pointer;
              display: block;
              width: 60px;
              display: block;
              margin: 0 auto;
            " v-if="scope.row.file != null" />
          <img src="../../../src/assets/zwtp.jpg" style="width: 60px; display: block; margin: 0 auto" v-else />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="80">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button @click="set_product(scope.row)" type="text">编辑</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="set_user(scope.row)" type="text">关联工人</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="product_guige(scope.row)" type="text">关联规格</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="product_danjia(scope.row)" type="text">产品单价</el-button>
              </el-dropdown-item>
              <!-- <el-dropdown-item>
                <el-button @click="
                  get_ProductspecificationJobTypeList(
                    scope.row.product[0].id,
                    scope.row.id
                  )
                  " type="text" style="margin-right: 15px">设置工价</el-button>
              </el-dropdown-item> -->
              <el-dropdown-item>
                <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                  title="是否删除这条数据？" @confirm="del_product(scope.row)">
                  <el-button slot="reference" type="text">
                    删除</el-button>
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="isProduct" width="50%" :close-on-click-modal="false" @close="close_diolog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联产品" label-width="100px" prop="product_id">
              <el-select v-model="ruleForm.product_id" filterable @change="product_change" placeholder="请选择产品">
                <el-option v-for="item in productList" :key="item.id" :label="item.product_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号名称" label-width="100px" prop="model_number">
              <el-input v-model="ruleForm.model_number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p style="padding-left: 25px;font-size:16px;font-weight: bold;color: #1890ff" v-if="ProductJobTypeList_spadd.length>0">标准工价：</p>
        <div class="btn-box">
        <div class="lis" v-for="item in ProductJobTypeList_spadd" :key="item.id">
        <el-row
          style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            justify-content: center;
          "
        >
          <el-col :span="10" style="text-align: center">
            <span>{{ item.job_type }}</span>
          </el-col>
          <el-col :span="14">
            <el-input-number v-model="item.price"></el-input-number>
          </el-col>
          
        </el-row>
      </div>
    </div>
        <el-form-item label="型号图片" label-width="100px" prop="file_id" style="margin-top: 15px">
          <uplodeImg ref="Upload" :value="imgUrl" :limit="limit" @subImg="subImg"></uplodeImg>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false">取 消</el-button>
        <el-button type="primary" v-if="isset == 1" @click="submitadd('ruleForm')">确定</el-button>
        <el-button type="primary" v-if="isset == 2" @click="aler_tModelNumber('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
    <bigimg :imgurl="bigurl" :product="bigproduct" :model_number="bigmodel_number" ref="img_big"></bigimg>

    <el-dialog title="设置工价" :visible.sync="isjobtype" width="35%" :close-on-click-modal="false">
      <div class="lis" v-for="item in ProductJobTypeList_sp" :key="item.id">
        <el-row style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            justify-content: center;
          ">
          <el-col :span="10" style="text-align: center">
            <span>{{ item.job_type }}</span>
          </el-col>
          <el-col :span="10">
            <el-input-number v-model="item.price"></el-input-number>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isjobtype = false">取 消</el-button>
        <el-button type="primary" @click="set_JobTypePriceBySpecificationId">确定</el-button>
      </span>
    </el-dialog>



    <el-dialog title="工人绑定" :visible.sync="isProduct_user" width="40%" :close-on-click-modal="false"
      @close="close_diolog_bangd">
      <div class="list_order" style="margin-bottom: 5px;">
        <div class="lis">
          <el-row style="display: flex;align-items: center;">
            <el-col>产品： <span style="font-weight: bold;"> {{ bangding.product }}</span></el-col>
            <el-col>型号 ：<span style="font-weight: bold;">{{ bangding.model_number }}</span></el-col>
          </el-row>
        </div>
      </div>
      <div class="list_order">
        <div class="lis" v-for="item, index in add_user" :key="index">
          <el-row style="display: flex;align-items: center;">
            <el-col :span="12" style="display: flex;align-items: center;">工种：<el-input v-model="item.job_type" disabled
                style="flex: 1;margin-right: 15px;"></el-input></el-col>
            <el-col :span="12" style="display: flex;align-items: center;">工人：
              <el-select v-model="item.users" multiple placeholder="请选择工人：" style="flex: 1;margin-right: 15px;">
                <el-option v-for="ite, inde in item.job_type_user" :label="ite.employee_name" :value="ite.user_id"
                  :key="ite.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_user = false">取 消</el-button>
        <el-button type="primary" @click="set_ModelNumberUser">确定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="产品单价" :visible.sync="isProduct_danjia" width="60%" :close-on-click-modal="false"
      @close="close_isProduct_danjia">
      <el-row style="display:flex; align-items:center;" v-if="specification_list.length < 1">
        <el-col :span="8">
          <el-row style="display:flex; align-items:center;">
            <el-col :span="5" style="text-align:center">
              单价:
            </el-col>
            <el-col :span="19" style="text-align:center">
              <el-input-number :precision="2" v-model="product_obj.unit_price" :min="0" @change="price_change"></el-input-number>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="list_order" style="margin-bottom: 5px;" v-if="specification_list">
        <div class="lis" v-for="item, index in specification_list" :key="index"
          v-if="specification_list[0].specification">
          <el-row style="display:flex; align-items:center;">
            <el-col :span="8" style="text-align:center">
              <el-row style="display:flex; align-items:center;">
                <el-col :span="6" style="text-align:center">
                  规格:
                </el-col>
                <el-col :span="18" style="text-align:center;margin-right:10px">
                  <el-input v-model="item.specification" disabled></el-input>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8" style="text-align:center;margin-right:10px">
              <el-row style="display:flex; align-items:center;">
                <el-col :span="6" style="text-align:center">
                  单价:
                </el-col>
                <el-col :span="18" style="text-align:center;margin-right:10px">
                  <el-input-number :precision="2" v-model="item.unit_price" :min="0"  style="max-width:300px;width:100%" ></el-input-number>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="8" style="text-align:center;margin-right:10px">
              <el-row style="display:flex; align-items:center;">
                <el-col :span="6" style="text-align:center">
                  系数:
                </el-col>
                <el-col :span="18" style="text-align:center;margin-right:10px">
                  <el-input-number :precision="2" v-model="item.coefficient" :min="0"  style="max-width:300px;width:100%" ></el-input-number>
                </el-col>
              </el-row>
            </el-col> -->
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct_danjia = false">取 消</el-button>
        <el-button type="primary" @click="set_ModelNumberUser_price">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="关联规格" :visible.sync="is_specification" width="30%" :close-on-click-modal="false"
      @close="close_is_specification">
      <el-row style="display: flex; align-items: center">
        <el-col :span="6" style="text-align: center"> 产品 </el-col>
        <el-col :span="18">
          <el-select v-model="guanlian.product_id" filterable  @change="product_id_change" placeholder="请选择产品"
            style="width: 100%">
            <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style='margin-top:15px'>
        <el-col :span="6" style="text-align: center">型号名称</el-col>
        <el-col :span="18">
          <el-select filterable v-model="guanlian.model_number_id" @change='get_SpecificationLists' placeholder="请选择型号" style="width: 100%">
            <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style='margin-top:15px'>
        <el-col :span="6" style="text-align: center">规格</el-col>
        <el-col :span="18">
          <el-select filterable v-model="guanlian.specification_ids" placeholder="请选择型号" multiple style="width: 100%">
            <el-option v-for="(item, index) in SpecificationList" :key="index" :label="item.specification"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="isProduct_danjia = false">取 消</el-button> -->
        <el-button type="primary" @click="set_is_specification">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getModelNumberList,
  addModelNumber,
  delModelNumber,
  getProductList,
  getSemiListByProductId,
  getColorList,
  alertModelNumber,
  getJobTypePriceBySpecificationId,
  getProductJobTypeList,
  setJobTypePriceBySpecificationId,
  getModelNumberUser,
  getEmployeeList,
  setModelNumberUser,
  getSpecificationList,
  getProductUnitPrice,
  updateProductUnitPrice,
  setModelNumberSpecification,
  getJobTypeWages
} from "@/api/product/index";
import uplodeImg from "@/components/ImageUpload";
import bigimg from "@/components/bigimg";
export default {
  components: {
    uplodeImg,
    bigimg,
  },
  data() {
    return {
      is_specification: false,
      isProduct_danjia: false,
      specification_list: [],
      product_obj: {
        product: '',
        product_id: "",
        model_number: '',
        model_number_id: '',
        unit_price: '',
        coefficient:''
      },
      ProductJobTypeList_sp: [],
      isset: 1,
      ser: {
        product_id: "",
        model_number_id: "",
      },
      guanlian: {
        product_id: "",
        model_number_id: "",
        specification_ids: []
      },
      bigurl: "",
      bigproduct: "",
      bigmodel_number: "",
      uploadImgUrl: this.$global.imgQianJui,
      limit: 1,
      imgUrl: "",
      model_number: "",
      isprice: false,
      price: "",
      title: "",
      isProduct: false,
      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      ruleForm: {
        model_number: "",
        model_number_id: "",
        product_id: "",
        file_id: "",

      },
      rules: {
        product_ids: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        model_number: [
          { required: true, message: "请输入型号名称", trigger: "blur" },
        ],
      },
      specificationlist: [],
      productList: [],
      ModelNumberList: [],
      producttypelist: [],
      SemiList: [],
      ColorList: [],
      ban_product: [],
      arr: [],
      isjobtype: false,
      jiage: {
        product_id: "",
        model_number_id: "",
      },
      bangding: {
        product: '',
        model_number: ''
      },
      add_user: [],
      isProduct_user: false,
      SpecificationList: [],
      ProductJobTypeList_spadd:[]
    };
  },
  mounted() {
    this.getlist();
    this.getProduct();
  },
  methods: {
    
    close_diolog() {
      this.ruleForm = {
        id: "",
        model_number: "",
        product_id: "",
        file_id: "",
      };
      this.ban_product = [];
      this.imgUrls = "";
      this.imgUrl = "";
      this.ProductJobTypeList_spadd=[]
    },
    get_JobTypeWages(id,ids){
      let obj={
        product_id:id,
        model_number_id:ids
      }
      getJobTypeWages(obj).then(res => {
        if (res.code == 200) {
          if(res.data.length>0){
            res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type.job_type,
              job_type_id: item.job_type_id,
              price:item.price,
            };
            this.ProductJobTypeList_spadd.push(obj);
          });
          }else{
            this.getjobtype_add(id)
          }  
        }
      })
    },
    getjobtype_add(id) {
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type,
              job_type_id: item.id,
              price: "",
            };
            this.ProductJobTypeList_spadd.push(obj);
          });
          // this.isjobtype = true;
        }
      });
    },
    set_ModelNumberUser_price(val, index) {
      let obj = {
        product_id: this.product_obj.product_id,
        model_number_id: this.product_obj.model_number_id,
        data_price:this.specification_list
        // specification_id: this.specification_list[index].specification_id,
        // unit_price: this.specification_list[index].unit_price
      }
      updateProductUnitPrice(obj).then(res => {
        if (res.code == 200) {
          // this.isProduct_danjia = false
          this.set_is_specification=false
          this.$message.success("提交成功");
        }
      })
    },
    // set_ModelNumberUser_price(){
      
    // },
    get_SpecificationLists(){
      let obj={
        product_id:this.guanlian.product_id,
        model_number_id:this.guanlian.model_number_id
      }
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          
          let arry=[]
          res.data.data.forEach(item=>{
            arry.push(item.id)
          })

          this.guanlian.specification_ids  = arry
        }
      });
    },

    close_is_specification() {
      this.is_specification = false

    },
    set_is_specification() {

      setModelNumberSpecification(this.guanlian).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.is_specification = false
          this.getlist();
        }
      })
    },
    get_SpecificationList() {
      getSpecificationList({ per_page: 88888 }).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },
    product_guige(row) {
      this.is_specification = true
      // this.guanlian.product_id=row.product
      this.get_SpecificationList()
    },
    
    price_change(val) {
      let obj = {
        product_id: this.product_obj.product_id,
        model_number_id: this.product_obj.model_number_id,
        unit_price: this.product_obj.unit_price
      }
      updateProductUnitPrice(obj).then(res => {
        if (res.code == 200) {
          this.isProduct_danjia = false
          this.$message.success("提交成功");
        }
      })
    },
    product_danjia(row) {
      console.log(row)
      this.product_obj.product = row.product[0].product_name
      this.product_obj.product_id = row.product[0].id
      this.product_obj.model_number = row.model_number
      this.product_obj.model_number_id = row.id
      this.isProduct_danjia = true
      this.specification_list=[]
      getProductUnitPrice({ product_id: row.product[0].id, model_number_id: row.id, specification_id: '' }).then((res) => {
        if (res.code == 200) {
          if (res.data[0].specification) {
            res.data.forEach(item => {
              let obj = {
                specification_id: item.specification_id,
                specification: item.specification ? item.specification.specification : '',
                unit_price: item.unit_price,
                coefficient:item.coefficient
              }
              this.specification_list.push(obj)
            })
          }
        }
      });
    },
    close_isProduct_danjia() {
      this.isProduct_danjia = false
    },
    set_ModelNumberUser() {
      setModelNumberUser({ param_data: this.add_user }).then(res => {
        if (res.code == 200) {
          this.isProduct_user = false
          this.$message.success("提交成功");
          this.close_diolog_bangd()
        }
      })
    },
    close_diolog_bangd() {
      this.bangding = {
        product: '',
        model_number: ''
      }
      this.add_user = []
    },
    async get_ModelNumberUser(id, ids) {
      var istrue = true
      await getModelNumberUser({ model_number_id: id, product_id: ids }).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            res.data.forEach(element => {
              let obj = {
                users: element.user_id_arr,
                job_type_user: [],
                model_number_id: id,
                job_type_id: element.job_type.id,
                job_type: element.job_type.job_type
              }
              this.get_EmployeeList(element.job_type.id).then(Result => {
                obj.job_type_user = Result
                console.log(Result)
              })
              this.add_user.push(obj)
              this.isProduct_user = true
            });
          } else {
            istrue = false
          }
        }
      })
      return istrue
    },
    set_user(row) {
      console.log(row)
      this.bangding.product = row.product[0].product_name
      this.bangding.model_number = row.model_number
      this.get_ModelNumberUser(row.id, row.product[0].id).then(Result => {
        if (Result == true) {
          return false
        } else {
          getProductJobTypeList({ product_id: row.product[0].id }).then(res => {
            if (res.code == 200) {
              this.isProduct_user = true
              res.data.forEach(element => {
                let obj = {
                  users: [],
                  job_type_user: [],
                  model_number_id: row.id,
                  job_type_id: element.id,
                  job_type: element.job_type
                }
                this.get_EmployeeList(element.id).then(Result => {
                  obj.job_type_user = Result
                  console.log(Result)
                })
                this.add_user.push(obj)
              });
            }
          })
        }
      })
    },
    async get_EmployeeList(id) {
      var arry = []
      await getEmployeeList({ job_type_id: id }).then(res => {
        if (res.code == 200) {
          arry = res.data.data
        }
      })
      return arry
    },
    set_JobTypePriceBySpecificationId() {
      let obj = {
        ...this.jiage,
        job_type_price_arr: this.ProductJobTypeList_sp,
      };
      setJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.isjobtype = false;
          this.jiage = {
            product_id: "",
            model_number_id: "",
          };
          this.getlist();
        }
      });
    },
    // get_ProductspecificationJobTypeList(product_id,model_number_id) {
    //   this.jiage.product_id=product_id
    //   this.jiage.model_number_id=model_number_id
    //   this.isjobtype = true;
    // },
    // 查询产品规格工种列表
    get_ProductspecificationJobTypeList(product_ids, model_number_ids) {
      this.jiage.product_id = product_ids;
      this.jiage.model_number_id = model_number_ids;
      let obj = {
        product_id: product_ids,
        model_number_id: model_number_ids,
        specification_id:""
      };
      this.ProductJobTypeList_sp = [];
      getJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.getjobtype(product_ids);
          } else {
            res.data.forEach((item) => {
              let obj = {
                job_type: item.job_type.job_type,
                job_type_id: item.job_type.id,
                price: item.price,
              };
              this.ProductJobTypeList_sp.push(obj);
            });
            this.isjobtype = true;
          }
        }
      });
    },
    getjobtype(id) {
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type,
              job_type_id: item.id,
              price: "",
            };
            this.ProductJobTypeList_sp.push(obj);
          });
          this.isjobtype = true;
        }
      });
    },
    color_change(val, index) {
      setTimeout(() => {
        console.log(this.$refs["editGrade_" + index][0]);
        if (this.$refs["editGrade_" + index][0]["createdSelected"]) {
          // 新增
          this.ban_product.forEach((item) => {
            if (val == item.color_id) {
              console.log("EEEE");
              item.color = item.color_id;
            }
          });
        } else {
          // 选择
          for (let i = 0; i < this.ban_product.length; i++) {
            if (this.ban_product[i].color_id == val) {
              this.ColorList.forEach((ite) => {
                if (val == ite.id) {
                  this.ban_product[i].color = ite.color;
                  console.log("FFF");
                }
              });
            }
          }
        }
      }, 500);
    },
    product_change(val) {
      // this.get_SemiListByProductId(val);
      // this.get_ColorList();
      this.getjobtype_add(val)
    },
    get_ColorList() {
      getColorList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },
    get_SemiListByProductId(val) {
      this.ban_product = [];
      getSemiListByProductId({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.SemiList = res.data;
          this.SemiList.forEach((item) => {
            getProductList({ is_dropdown: 1, modelid: item.modelid }).then(
              (res) => {
                if (res.code == 200) {
                  let obj = {
                    modelid: item.modelid,
                    modelname: item.modelname,
                    color_essential: "",
                    color_shelf: "",
                    color_match: "",
                    select_product: res.data,
                    product_id: "",
                  };
                  this.ban_product.push(obj);
                }
              }
            );
          });
        }
      });
    },
    product_id_change(val) {
      this.ModelNumberList = [];
      this.ser.model_number_id = "";
      this.guanlian.model_number_id=""
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    push_img(row) {
      this.bigurl = row.file.file_url;
      this.bigproduct = row.product[0].product_name;
      this.bigmodel_number = row.model_number.model_number;
      this.$refs.img_big.open();
    },
    subImg(id) {
      this.ruleForm.file_id = id;
      console.log(id);
    },
    //获取产品
    getProduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    set_product(row) {
      console.log(row);
      if (row.file) {
        this.imgUrl = row.file.file_url;
      }
      this.ban_product = [];
      this.ruleForm.id = row.model_number.id;
      this.ruleForm.model_number = row.model_number;
      this.ruleForm.model_number_id = row.id;
      this.ruleForm.product_id = row.product[0].id;

      this.title = "编辑型号";
      this.isProduct = true;
      this.isset = 2;
      this.get_JobTypeWages(this.ruleForm.product_id,this.ruleForm.model_number_id)
    },

    add_model_number() {
      this.title = "新增型号";
      this.isProduct = true;
      this.ruleForm = {
        model_number: "",
        model_number_id: "",
        product_id: "",
        file_id: "",
      };
      this.imgUrls = "";
      this.imgUrl = "";
      this.$nextTick(function () {
        this.$refs.Upload.pus_value();
      });
      this.isset = 1;

    },

    is_img(){
          // var isimg = true;
          // this.$refs.Upload.$el.children[0].children[0].children.forEach((item) => {
          //   console.log(item.className);
          //   if (item.className == "el-upload-list__item is-ready") {
          //     isimg = false;
          //   }
          // });
          // if (isimg == false) {
          //   this.$message({
          //     message: "请点击上传到服务器！后重试~",
          //     type: "error",
          //   });
          //   return false;
          // }
    },

    aler_tModelNumber(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           var isimg = true;
          this.$refs.Upload.$el.children[0].children[0].children.forEach((item) => {
            console.log(item.className);
            if (item.className == "el-upload-list__item is-ready") {
              isimg = false;
            }
          });
          if (isimg == false) {
            this.$message({
              message: "请点击上传到服务器！后重试~",
              type: "error",
            });
            return false;
          }
          alertModelNumber({ ...this.ruleForm,job_type_price_arr:this.ProductJobTypeList_spadd }).then(
            (res) => {
              if (res.code == 200) {
                this.isProduct = false;
                this.$message.success("提交成功");
                this.getlist();
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitadd(formName) {
      // console.log(this.ban_product);
      this.$refs[formName].validate((valid) => {
        if (valid) {
         
          addModelNumber({ ...this.ruleForm,job_type_price_arr:this.ProductJobTypeList_spadd}).then(
            (res) => {
              if (res.code == 200) {
                this.isProduct = false;
                this.$message.success("提交成功");
                this.getlist();
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getlist() {
      getModelNumberList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    model_number_click() {
      this.pagination = {
        per_page: 10,
        page: 1,
      };
      getModelNumberList({
        ...this.ser,
        ...this.pagination,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    del_product(row) {
      delModelNumber({
        id: row.id,
        is_del: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
  },
};
</script>

<style scoped>
.el-form>>>.el-form-item {
  margin-bottom: 0;
}

.list_order {
  display: grid;
  grid-template-columns: 1fr;
  place-items: left;
}

.list_order .lis {
  width: 100%;
  margin-top: 8px;

}


.btn-box{
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin-top:15px;
}

</style>
